<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin:  0;
            list-style: none;
        }
        #header .center{
            width: 1000px;
            margin: 0 auto;
            text-align: center;
        }
        #header li{
            width: calc((1000px - 7px)/8);
            border-right: 1px solid gainsboro;
            color: white;
            background-color: black;
            float: left;
            height: 60px;
            margin-top: 20px;
        }
        #header{
            background-color: black;
            width: 100%;
            overflow: hidden;
        }
        img{
            width: 100%;
        }
        #new .center span{
            float: right;
            color: gray;
        }
        #new .center,
        #protec .center{
            width: 1000px;
            margin: 0 auto;
            overflow: hidden;
        }
        #new .center div{
            float: left;
        }
        #protec .center li{
         width: calc((1000px - 30px)/4);
         height:250px ;
         float: left;
         margin-right: 10px;
         margin-top: 10px;
        }
        #new{
            height: 200px;
        }
        .fu{
            width: 500px;
        }
        .left{
            width: 500px;
            height: 40px;
        }
        #footer{
            height: 100px;
            background-color: black;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="header">
        <div class="center">
            <ul>
                <li>集团介绍</li>
                <li>集团介绍</li>
                <li>集团介绍</li>
                <li>集团介绍</li>
                <li>集团介绍</li>
                <li>集团介绍</li>
                <li>集团介绍</li>
                <li style="border-right: none;">集团介绍</li>
            </ul>
        </div>
        <img src="./01.png" alt="">
    </div>
    <div id="new">
        <div class="center">
           <div class="fu">
            <h3 style="margin-top: 10px;">公司新闻</h3>
            <ul>
                <li>陈建成董事长出席ATB集团<span>2013-07-30</span></li>
                <li>陈建成董事长出席ATB集团<span>2013-07-30</span></li>
                <li>陈建成董事长出席ATB集团<span>2013-07-30</span></li>
                <li>陈建成董事长出席ATB集团<span>2013-07-30</span></li>
                <li>陈建成董事长出席ATB集团<span>2013-07-30</span></li>
                <li>陈建成董事长出席ATB集团<span>2013-07-30</span></li>
            </ul>
           </div>
            <div class="left"></div>
        </div>
    </div>
    <div id="protec">
        <div class="center">
            <p>市场项目</p>
            <ul>
                <li><img src="./03.png" alt=""><p>石油、天然气及采矿:在市场中的安全
性，可靠性，效率和最短的停机.…</p></li>
                <li><img src="./03.png" alt=""><p>石油、天然气及采矿:在市场中的安全
性，可靠性，效率和最短的停机.…</p></li>
                <li><img src="./03.png" alt=""><p>石油、天然气及采矿:在市场中的安全
性，可靠性，效率和最短的停机.…</p></li>
                <li style="margin-right: 0px;"><img src="./03.png" alt=""><p>石油、天然气及采矿:在市场中的安全
性，可靠性，效率和最短的停机.…</p></li>
            </ul>
        </div>
    </div>
    <div id="footer">
            <p style="color: gray;">北京千蜂互联科技有限公司版权所有北京市海淀区宝北里西区28号天主利商场4层<br>
                京ICP箭12003911号-6 CopyrightG 2013-2019</p>
    </div>
    
</body>
</html>